<template>
  <div>
    <p class="liebiao">课程列表</p>
    <el-row :gutter="20">
      <el-col :span="6" style="margin-bottom:20px;" v-for="item in myarr" :key="item.id">
        <div style="background-color: white;padding:1px 10px 14px" >
          <p class="top">
            <span>ID:{{item.id}}</span>
            <el-checkbox />
          </p>
          <div class="imgs">
            <img :src="item.image" alt="" style="display: inline-block; width: 100% ">
          </div>
          <p class="kecheng">{{item.biaoti}}</p>
          <p>报名费:￥{{item.pay}}</p>
          <p>销量:{{item.xiaoliang}}</p>
          <p>上传人:{{item.shangchuanren}}</p>
          <p>上传时间:{{item.createTime}}</p>
          <div class="button">
            <el-button type="primary" icon="el-icon-edit"  @click="handleEdit(item)">编辑</el-button>
            <el-button type="info" icon="el-icon-delete">删除</el-button>
          </div>
        </div>
      </el-col>
      
       
    </el-row>
  </div>
</template>

<script>
import { lessonDeleteApi, updateLessonApi } from "../../../api/studentApi";
import eventBus from "../../../utils/eventBus";
export default {
  props: ["myarr"],
  data() {
    return {
      contractType2: false,
      multipleSelection: [], // 就是双向绑定checkbox  集合数组
    };
  },
  mounted() {
    eventBus.$on("batchtranfer", this.bathDeletefun); // 添加自定义事件
  },
  methods: {
    handleSelectionChange(val) {
      // console.log(val);
      this.multipleSelection = val;
    },
    bathDeletefun() {
      // 批量删除
      var idArr = this.multipleSelection.map((item) => item.userid);
      var ids = idArr.join(",");
      lessonDeleteApi({ ids: ids }).then((res) => {
        // console.log('res', res)
        if (res.code == 200) {
          this.$emit("resetTable"); // 刷新表格
        }
      });
    },
    handleEdit(item) {
      this.$emit("opendialogfun", item);
    },
    handleDelete(id) {
      // 删除逻辑，发送请求把id传送给后端，后端删除逻辑，然后通知前端，前端刷新表格
      // 删除，批量删除，添加，修改，请求都不用返回数据，只需要后台通知我们删除成功就可以。
      // 删除操作之后，我们从新在查询一次就ok了。
      // 发送请求 传递id值
      deleteByIdApi({ userid: id }).then((res) => {
        // console.log(res)
        if (res.code == 200) {
          this.$emit("resetTable"); // 刷新表格
        }
      });
    },
    handleOpen(row) {
      //   openByIdApi({ userid: id }).then((res) => {
      //     console.log(res)
      //     if (res.code == 200) {
      //       this.$emit('resetTable') // 刷新表格
      //     }
      //   })
      this.$emit("opena", row);
    },
  },
};
</script>

<style scoped rel="stylesheet/scss" lang="scss">
.liebiao {
  // background-color: #fff;
  padding: 1px 0px 18px 30px;
  font-weight: 600;
  margin-bottom: 0px;
}
.top{
  display: flex;
  justify-content: space-between;
}
.imgs{
  height: 150px;
  width: 100% ;
  overflow: hidden;
}
.kecheng{
  font-weight: 600;
  text-align: center;
}
.button{
  display: flex;
  justify-content: space-around;
  .el-button{
    padding:5px 12px;
    text-align: center;
  }
}
</style>
